<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 80px; width: 100%"></div>
		<div class="imgBox"><img src="/src/assets/page/10.png" alt="" /></div>
		<!-- 个人标题 -->
		<div class="ryan f f-a-c f-j-c f-d-c">
			<div class="img">
				<img class="avart" :src="obj.sellerAvatar" alt="" />
				<div class="dui"><img src="/src/assets/page/4.png" class="duihao" alt="" /></div>
			</div>
			<div class="amacher">{{ obj.sellerFirstName }}{{ obj.sellerLastName }}</div>
			<div class="founder">{{ joip }}</div>
			<div class="seattle f f-a-c"><img src="/src/assets/page/8.png" alt="" /> Location: {{ obj.countryName }}{{ obj.stateName }}{{ obj.cityName }} | 18:30</div>
			<div class="topcs f f-a-c">
				<div class="top">Topics:</div>
				<div class="topItem" v-for="(item, index) in obj.sellerTopicNames" :key="index">{{ item }}</div>
			</div>
			<div class="copunt">
				{{ obj.buyerMyDescribe }}
			</div>
			<div class="ask">Ask on Xpert</div>
			<div class="fenxiang hand f f-a-c">
				<div @click="shareBtn" class="lefBtn f f-a-c">
					<img src="/src/assets/page/6.png" class="leImg" alt="" />
					Share
				</div>
				<div @click="reports()" class="rigBtn hand f f-a-c">
					<img src="/src/assets/page/5.png" class="leImg" alt="" />
					Report
				</div>
			</div>
			<div class="xian"></div>
		</div>
		<!-- Clubs -->
		<div class="club m1280">
			<div class="artice">
				<div class="titClub">Article</div>
				<div class="f f-a-c f-w-w">
					<div v-for="(item, index) in port.articeList" :key="index" class="articItem f f-a-c">
						<div class="itemLef">
							<div class="topBtn f f-a-c f-j-b">
								<div class="lefTit">{{ item.clubName }}</div>
								<div :class="{ btnAct: item.isJoinClub > 0 }" @click.stop="joinIn(item)" class="rigBtns hand">{{ item.isJoinClub > 0 ? "Joined" : "Join" }}</div>
							</div>
							<div class="topAct">{{ item.title }}</div>
							<div class="count">
								{{ item.content }}
							</div>
							<div class="botSep f f-a-c f-j-b">
								<div class="sepTh">{{ dayjs(item.publishTime).format("MM DD") }}</div>
								<div class="rigTopcs f f-a-c">
									<div v-for="(ite, ind) in item.tags" :key="ind" class="topItem hand">{{ ite }}</div>
									<!-- <div class="topItem">Data</div> -->
								</div>
							</div>
						</div>
						<div class="itemRig">
							<img :src="item.image" alt="" />
						</div>
					</div>
					<!-- <div class="more hand m1280">Moer</div> -->
				</div>
			</div>
		</div>
		<div style="margin: 80px" class="hand f f-j-c">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" :default-page-size="4" @current-change="currentChange" layout="prev, pager, next" :total="totlaArt" />
			</div>
		</div>
		<Join ref="join" />
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import { copy } from "../../../utils/setting";
	import { ElMessage, dayjs } from "element-plus";
	import {
		ClubFounderInformation,
		ReportUsers,
		PeopleAlso,
		TenrendsList,
		ClbusList,
		CollectionClub,
		RecentlyView,
		ArticleListPorifile,
		InspireByTrends,
		PeopleAlsoView,
		RecentlyArtile
	} from "@/api/knowClub/index.js";
	import { FreeMode } from "swiper/modules";
	import { Swiper, SwiperSlide } from "swiper/vue";
	import "swiper/swiper-bundle.css";
	import upLoad from "./upLoad.vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import Join from "@/components/join/index.vue";
	import { useRoute } from "vue-router";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import "swiper/css";
	import "swiper/css/navigation";
	import "swiper/css/pagination";
	import "swiper/css/scrollbar";
	import "swiper/css/free-mode";
	let modules = [FreeMode];
	let statusTab = ref(1);
	let join = ref("");
	let upLoads = ref(null);
	let route = useRoute();
	let obj = ref({});
	let joip = ref("--");
	let pageNum = ref(1);
	let pageNumArt = ref(1);
	let totlaArt = ref(0);
	let port = reactive({
		list: [],
		articeList: [],
		peopleList: [],
		trendsList: [],
		recentlyViewList: [],
		peopAlsoLis: [],
		tenrendsList: [],
		recentlyArtileList: []
	});
	let pageSize = ref(4);
	let userId = JSON.parse(localStorage.getItem("userInfo")).userId;
	let id = ref(route.query.id);
	onMounted(async () => {
		await initMyPorfile();
		// await clbusList();
		await ArticleList();
		// await peopleList();
		// await trends();
		// await recentlyList();
		// await alsoList();
		// await tenrendsList();
		// await aentlyArtile();
		window.addEventListener("scroll", handleScroll);
	});
	// 点击收藏俱乐部
	const Collection = async () => {
		let n = await CollectionClub({
			clubId: "",
			groupId: ""
		});
	};
	const joinIn = item => {
		console.log(item, "111111111111");
		if (item.isJoinClub > 0) {
			// 代表已经加入俱乐部
		} else {
			// 代表未加入俱乐部
			join.value.obj = item;
			join.value.money = item.subscription;
			join.value.upLoadVisible = true;
		}
	};
	const aentlyArtile = async () => {
		let n = await RecentlyArtile({
			userId: id.value
		});
		port.recentlyArtileList = n.data;
	};
	const tenrendsList = async () => {
		let n = await TenrendsList();
		port.tenrendsList = n.data.list;
	};
	//people also view
	const alsoList = async () => {
		let n = await PeopleAlso();
		port.peopAlsoLis = n.data.list;
	};
	// recentlyList
	const recentlyList = async () => {
		let n = await RecentlyView({
			userId: id.value
		});
		port.recentlyViewList = n.data;
	};
	// /俱乐部inspire by trends
	const trends = async () => {
		let n = await InspireByTrends();
		port.trendsList = n.data.list;
	};
	// 获取people also view列表
	const peopleList = async () => {
		let n = await PeopleAlsoView();
		port.peopleList = n.data.list;
	};
	const currentChange = e => {
		pageNumArt.value = e;
		ArticleList();
	};
	// 获取artice列表
	const ArticleList = async () => {
		let n = await ArticleListPorifile({ paeNum: pageNumArt.value, pageSize: 4, userId: id.value });
		port.articeList = n.data.list;
		totlaArt.value = n.data.total;
	};

	// 获取clbusList
	const clbusList = async () => {
		console.log(pageNum.value, pageSize.value, id.value, "2222222222222222222222222");
		let n = await ClbusList({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			userId: id.value
		});
		port.list = n.data.list;
	};
	// 个人信息
	const initMyPorfile = async () => {
		let n = await ClubFounderInformation({
			userId: id.value
		});
		obj.value = n.data;
		// 个人职位
		if (obj.value.sellerWorkExperience[0]) {
			joip.value = obj.value.sellerWorkExperience[0].position + "@" + obj.value.sellerWorkExperience[0].company;
		}
	};
	const goClub = () => {
		router.push({
			path: "/Club"
		});
	};
	const goClubs = () => {
		router.push({
			path: "/PersonalClubs",
			query: {
				id: id.value
			}
		});
	};
	// 点击复制
	const shareBtn = () => {
		const text = window.location.href;
		copy(text);
	};
	// 点击举报
	const reports = () => {
		upLoads.value.upLoadVisible = true;
	};
	// 举报请求
	const reportObj = async obj => {
		console.log(userId, obj, "222222222222");
		let n = await ReportUsers({
			reportUserIdentity: 2,
			foreignId: id.value,
			reportContent: obj.content,
			reportImages: obj.imgList
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
		}
		upLoads.value.upLoadVisible = false;
	};
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 10) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
